<template>
  <header class="header">
    <div class="header-container">
      <div class="left-section">
        <div class="logo-section" @click="goToHome">
          <img src="@/assets/logo.svg" alt="" class="logo-img">
          <span class="logo-text">失物招领平台</span>
        </div>

        <nav class="nav-menu">
          <div 
            class="nav-item" 
            :class="{ active: currentRoute === '/' }"
            @click="goToHome"
          >
            <span class="nav-icon">🏠</span>
            <span class="nav-text">首页</span>
          </div>
          <div 
            class="nav-item"
            :class="{ active: currentRoute.startsWith('/publish') }"
            @click="() => goToPublish()"
          >
            <span class="nav-icon">📝</span>
            <span class="nav-text">发布</span>
          </div>
          <div 
            class="nav-item"
            :class="{ active: currentRoute.startsWith('/announcement') }"
            @click="goToAnnouncement"
          >
            <span class="nav-icon">📢</span>
            <span class="nav-text">公告</span>
          </div>
          <div 
            class="nav-item"
            :class="{ active: currentRoute.startsWith('/about') }"
            @click="goToAbout"
          >
            <span class="nav-icon">ℹ️</span>
            <span class="nav-text">关于</span>
          </div>
        </nav>
      </div>

      <div class="right-section">
        <template v-if="isLoggedIn">
          <div 
            class="profile-section"
            :class="{ active: currentRoute.startsWith('/user') }"
            @click="goToProfile"
          >
            <span class="profile-icon">👤</span>
            <span class="profile-text">个人中心</span>
          </div>
          <div 
            class="logout-btn"
            @click="handleLogout"
          >
            <span class="logout-icon">🚪</span>
            <span class="logout-text">退出</span>
          </div>
        </template>
        <div 
          v-else
          class="login-btn"
          @click="goToLogin"
        >
          登录/注册
        </div>
        
        <!-- 移动端菜单按钮 -->
        <div class="mobile-menu-btn" @click="toggleMobileMenu">
          <el-icon :size="24"><Menu /></el-icon>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="mobile-menu" :class="{ active: mobileMenuVisible }">
      <div class="mobile-nav-item" @click="navigateMobile('/')">
        <span class="mobile-nav-icon">🏠</span>
        <span>首页</span>
      </div>
      <div class="mobile-nav-item" @click="navigateMobile('/publish')">
        <span class="mobile-nav-icon">📝</span>
        <span>发布</span>
      </div>
      <div class="mobile-nav-item" @click="navigateMobile('/announcement')">
        <span class="mobile-nav-icon">📢</span>
        <span>公告</span>
      </div>
      <div class="mobile-nav-item" @click="navigateMobile('/about')">
        <span class="mobile-nav-icon">ℹ️</span>
        <span>关于我们</span>
      </div>
      <div class="mobile-nav-item" @click="navigateMobile('/user')">
        <span class="mobile-nav-icon">👤</span>
        <span>个人中心</span>
      </div>
      <div v-if="isLoggedIn" class="mobile-nav-item logout" @click="handleLogout">
        <span class="mobile-nav-icon">🚪</span>
        <span>退出登录</span>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Menu } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

const currentRoute = computed(() => route.path)
const isLoggedIn = ref(false)

// 监听登录事件的处理函数
const handleStorageChange = (event: StorageEvent) => {
  if (event.key === 'token') {
    isLoggedIn.value = !!event.newValue
  }
}

// 监听自定义登录状态变化事件
const handleLoginStateChange = () => {
  isLoggedIn.value = !!localStorage.getItem('token')
}

// 初始化登录状态并添加事件监听
onMounted(() => {
  isLoggedIn.value = !!localStorage.getItem('token')
  
  // 监听localStorage变化
  window.addEventListener('storage', handleStorageChange)
  
  // 创建自定义事件监听器，用于其他组件通知登录状态变化
  window.addEventListener('login-state-changed', handleLoginStateChange)
})

// 移除事件监听
onUnmounted(() => {
  window.removeEventListener('storage', handleStorageChange)
  window.removeEventListener('login-state-changed', handleLoginStateChange)
})

// 移动端菜单状态
const mobileMenuVisible = ref(false)

const goToHome = () => {
  router.push('/')
  mobileMenuVisible.value = false
}

const goToPublish = (type?: string) => {
  if (!isLoggedIn.value) {
    router.push('/auth')
    return
  }
  router.push({
    path: '/publish',
    query: type ? { type } : undefined
  })
  mobileMenuVisible.value = false
}

const goToAnnouncement = () => {
  router.push('/announcement')
  mobileMenuVisible.value = false
}

const goToAbout = () => {
  router.push('/about')
  mobileMenuVisible.value = false
}

const goToProfile = () => {
  router.push('/user')
  mobileMenuVisible.value = false
}

const goToLogin = () => {
  router.push('/auth')
  mobileMenuVisible.value = false
}

// 退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确认退出登录？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 清除登录信息
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    
    // 直接更新登录状态
    isLoggedIn.value = false
    
    ElMessage.success('已退出登录')
    mobileMenuVisible.value = false
    
    // 如果当前在需要登录的页面，则跳转到首页
    if (route.path !== '/' && route.path !== '/about' && route.path !== '/announcement' && route.name !== 'NotFound') {
      router.push('/')
    }
  } catch {
    // 用户取消操作
  }
}

// 切换移动端菜单
const toggleMobileMenu = () => {
  mobileMenuVisible.value = !mobileMenuVisible.value
}

// 移动端导航
const navigateMobile = (path: string) => {
  if (path === '/publish' && !isLoggedIn.value) {
    router.push('/auth')
  } else {
    router.push(path)
  }
  mobileMenuVisible.value = false
}
</script>

<style scoped lang="scss">
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.header-container {
  max-width: 1200px;
  min-width: $min-width;
  height: 64px;
  margin: 0 auto;
  padding: 0 $spacing-large;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 48px;
  
  @media (max-width: 992px) {
    gap: 24px;
  }
  
  @media (max-width: 768px) {
    gap: 16px;
  }
}

.logo-section {
  display: flex;
  align-items: center;
  cursor: pointer;

  .logo-img {
    height: 40px;
    width: auto;
    margin-right: 12px;
    
    @media (max-width: 576px) {
      height: 32px;
      margin-right: 8px;
    }
  }

  .logo-text {
    font-size: 18px;
    color: #333;
    font-weight: 600;
    
    @media (max-width: 576px) {
      font-size: 16px;
    }
  }
}

.right-section {
  display: flex;
  align-items: center;
  gap: $spacing-base;
}

.nav-menu {
  display: flex;
  gap: 32px;
  
  @media (max-width: 992px) {
    gap: 16px;
  }
  
  @media (max-width: 768px) {
    display: none;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 15px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s;

    .nav-icon {
      font-size: 18px;
    }
    
    .nav-text {
      @media (max-width: 992px) {
        display: none;
      }
    }

    &:hover {
      color: #333;
      background: rgba(0, 0, 0, 0.04);
    }

    &.active {
      color: #409EFF;
      background: rgba(64, 158, 255, 0.1);
      font-weight: 500;
    }
    
    @media (max-width: 992px) {
      padding: 8px;
    }
  }
}

.profile-section {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s;

  .profile-icon {
    font-size: 18px;
  }
  
  .profile-text {
    @media (max-width: 768px) {
      display: none;
    }
  }

  &:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.04);
  }

  &.active {
    color: #409EFF;
    background: rgba(64, 158, 255, 0.1);
    font-weight: 500;
  }
}

.login-btn {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 4px;
  background: $primary-gradient;
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }
  
  @media (max-width: 768px) {
    padding: 6px 12px;
    font-size: 14px;
  }
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #F56C6C;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s;
  
  .logout-icon {
    font-size: 18px;
  }
  
  .logout-text {
    @media (max-width: 768px) {
      display: none;
    }
  }
  
  &:hover {
    background: rgba(245, 108, 108, 0.1);
  }
  
  @media (max-width: 992px) {
    padding: 8px;
  }
}

// 移动端菜单按钮
.mobile-menu-btn {
  display: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  
  &:hover {
    background: rgba(0, 0, 0, 0.04);
  }
  
  @media (max-width: 768px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 移动端菜单
.mobile-menu {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: $spacing-base;
  display: flex;
  flex-direction: column;
  gap: $spacing-small;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 99;
  
  &.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: $spacing-base;
    padding: $spacing-base;
    border-radius: 4px;
    cursor: pointer;
    
    &:hover {
      background: rgba(0, 0, 0, 0.04);
    }
    
    &.logout {
      color: #F56C6C;
      
      &:hover {
        background: rgba(245, 108, 108, 0.1);
      }
    }
    
    .mobile-nav-icon {
      font-size: 20px;
    }
  }
}
</style> 